<template>
    <div class="form_content">
        <span class="form_content_title" @click="foldClick()" v-if="title">
            {{ title }}

            <el-icon size="14" class="form_content_title_icon">
                <template v-if="isShowInfoFold">
                    <el-icon><ArrowDown /></el-icon>
                </template>
                <template v-else>
                    <el-icon><ArrowRight /></el-icon>
                </template>
            </el-icon>
        </span>

        <div>
            <slot
                name="form_info"
                class="form_content_from"
                :isShowInfoFold="isShowInfoFold"
            ></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
const isShowInfoFold = ref(true);
const props = defineProps({
    title: {
        required: false,
        default: () => "",
    },
});

function foldClick() {
    isShowInfoFold.value = !isShowInfoFold.value;
}
</script>

<style lang="scss" scoped>
.form_content {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 14px;
    color: #222222;
    padding: 6px 40px 0px 40px;
    // box-shadow: var(--el-box-shadow-light);
    &_title {
        cursor: pointer;
        display: block;
        margin-bottom: 16px;
        padding-left: 7px;
        position: relative;
        font-size: 14px;
        &_icon {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translate(0, -50%);
        }
        &::before {
            position: absolute;
            left: 0px;
            top: 3px;
            content: "";
            width: 4px;
            height: 15px;
            background: #185dfe;
        }
    }
}
</style>
